<template>
  <div class="enterprise-info">
<!-- 学校管理端 -->
    <!-- 搜索区域 -->
    <div class="search-area">
      <el-row :gutter="20" type="flex" justify="space-between" align="middle">
        <el-col :xs="24" :sm="18" :md="18" :lg="18" :xl="18" style="display: flex; justify-content: flex-end;">
          <!-- 企业名称 -->
          <el-input v-model="searchKeyword.name" placeholder="企业名称(模糊查)" style="width: 150px; margin-right: 20px;" 
            @keyup.enter="handleSearch"
          ></el-input>
          <!-- 企业地址 -->
          <el-input v-model="searchKeyword.address" placeholder="企业地址(模糊查)" style="width: 150px; margin-right: 20px;" 
            @keyup.enter="handleSearch"
          ></el-input>
          <!-- 联系人电话 -->
          <el-input v-model="searchKeyword.contact" placeholder="联系人(模糊查)" style="width: 150px; margin-right: 20px;" 
            @keyup.enter="handleSearch"
          ></el-input>
          <el-input v-model="searchKeyword.contactPhone" placeholder="联系人电话" style="width: 150px; margin-right: 20px;" 
            @keyup.enter="handleSearch"
          ></el-input>
          <!-- 搜索按钮 -->
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <!-- 重置按钮 -->
          <el-button type="info" plain @click="resetSearch">重置</el-button>
          <!-- 新增企业按钮 -->
          <el-button type="primary" @click="openAddDialog">新增企业</el-button>
        </el-col>
      </el-row>
    </div>
    
    <!-- 新增企业对话框 -->
    <AddEnterpriseDialog :visible.sync="addDialogVisible" @update:visible="addDialogVisible = $event"
      @refresh="handleRefresh">
    </AddEnterpriseDialog>
    <!-- 修改企业对话框 -->
    <UpdateEnterpriseDialog :visible.sync="updateDialogVisible" :enterprise="selectedEnterprise" @update:visible="updateDialogVisible = $event"
      @on-success="handleUpdateSuccess">
    </UpdateEnterpriseDialog>

    <!-- 删除企业对话框 -->
    <DeleteDialog :visible.sync="deleteDialogVisible" :id="currentDeleteId" @update:visible="deleteDialogVisible = $event"
      @confirm-delete="handleConfirmDelete">
    </DeleteDialog>

    <el-table :row-class-name="tableRowClassName" :data="dataList.slice((currentPage - 1) * PageSize, currentPage * PageSize)">
      <el-table-column type="index" label="序号" width="100px" align="center" />
      <el-table-column label="企业名称" align="center" prop="name" />
      <el-table-column label="地址" align="center" prop="address" />
      <el-table-column label="联系人" align="center" prop="contact" />
      <el-table-column label="联系电话" align="center" prop="contactPhone" />
      <el-table-column label="企业简介" align="center" prop="introduction" />
      <el-table-column label="企业邮箱" align="center" prop="email" />
      <el-table-column label="注册时间" align="center" prop="createTime" />
      <el-table-column align="center" label="操作" width="250">
        <template #default="scope">
          <!-- 查看职位按钮 -->
          <el-button size="mini" type="success" plain :class="{'no-recruit': !scope.row.recruitDomainList || scope.row.recruitDomainList.length === 0,}"
            @click="viewRecruitInfo(scope.row)">查看职位
          </el-button>
          <!-- 修改企业按钮 -->
          <el-button size="mini" type="primary" @click="openUpdateDialog(scope.row)">修改
          </el-button>
          <!-- 删除企业按钮 -->
          <el-button size="mini" type="danger" @click="openDeleteDialog(scope.row.id)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <div class="tabListPage" style="float: right; margin-right: 5%; margin-top: 20px;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="currentPage" :page-sizes="pageSizes" :page-size="PageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="totalCount"></el-pagination>
    </div>

    <!-- 查看职位信息的对话框 -->
    <RecruitInfoDialog :visible.sync="recruitDialogVisible" :recruitInfoList="recruitInfoList"></RecruitInfoDialog>
  </div>
</template>


<script>
import { getList,del,getListByParams } from '@/api/enterprise';
import RecruitInfoDialog from '../module/RecruitInfoDialog.vue';
import AddEnterpriseDialog from '../module/AddEnterpriseDialog.vue';
import UpdateEnterpriseDialog from '../module/UpdateEnterpriseDialog.vue';
import DeleteDialog from '../module/DeleteDialog.vue';

export default {
  components: {
    RecruitInfoDialog,
    AddEnterpriseDialog,
    UpdateEnterpriseDialog,
    DeleteDialog
  },
  data() {
    return {
      searchKeyword: {
        name: "", // 企业名称
        address: "", // 企业地址
        contact: "", // 联系人
        contactPhone: "", //电话
      },

      dataList: [], // 表格数据
      currentPage: 1, // 当前页码
      totalCount: 0, // 总条数
      pageSizes: [5, 10, 20], // 每页显示条数选项
      PageSize: 10, // 默认每页显示条数
      recruitDialogVisible: false, // 职位信息对话框是否可见
      recruitInfoList: [], // 当前企业的职位信息列表

      addDialogVisible: false, // 控制新增对话框的显示状态
      updateDialogVisible: false, // 控制修改对话框的显示状态
      selectedEnterprise: null, // 当前选中的企业对象

      deleteDialogVisible: false, // 控制删除对话框的显示状态
      currentDeleteId: 0, // 当前待删除的企业 ID
    };
  },

  methods: {
    // 获取企业数据
    getData() {
      getList()
        .then((response) => {
          if (response.code === 200) {
            this.dataList = response.data; // 设置表格数据
            this.totalCount = response.data.length; // 设置总条数
          } else {
            this.$message({
              showClose: true,
              message: '数据加载失败，请稍后再试！',
              type: 'error',
            });
          }
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            message: '网络错误，请检查您的网络连接！',
            type: 'error',
          });
        });
    },
    // 查看职位信息
    viewRecruitInfo(row) {
      const recruitInfo = row.recruitDomainList; // 获取当前企业的职位信息
      if (recruitInfo && recruitInfo.length > 0) {
        this.recruitInfoList = recruitInfo; // 设置职位信息
        this.recruitDialogVisible = true; // 打开对话框
      } else {
        this.$message({
          message: '当前企业无在招聘职位！',
          type: 'warning',
          duration: 3000, // 显示时长（毫秒）
        });
      }
    },
    // 打开新增对话框
    openAddDialog() {
      this.addDialogVisible = true;
    },
    // 刷新数据
    handleRefresh() {
      this.getData(); // 调用数据加载方法
    },
    
    // 打开修改对话框
    openUpdateDialog(enterprise) {
      if (!enterprise) {
        this.$message.warning("请选择需要修改的企业！");
        return;
      }
      this.selectedEnterprise = { ...enterprise }; // 深拷贝企业对象，避免直接修改原始数据
      this.updateDialogVisible = true; // 显示修改对话框
    },
    // 处理修改成功后的逻辑
    handleUpdateSuccess() {
      this.updateDialogVisible = false; // 关闭修改对话框
      this.$message({
        message: "修改企业成功！",
        type: "success",
      });
      this.getData(); // 刷新企业列表
    },
    // 打开删除对话框
    openDeleteDialog(id) {
      this.currentDeleteId = id; // 设置当前待删除的企业 ID
      this.deleteDialogVisible = true; // 显示删除对话框
    },
    // 确认删除
  handleConfirmDelete(id) {
    del(id)
      .then((response) => {
        if (response.code === 200) {
          this.$message({
            message: "删除成功！",
            type: "success",
          });
          this.getData(); // 刷新企业列表
        } else {
          this.$message({
            message: "删除失败，请稍后再试！",
            type: "error",
          });
        }
      })
      .catch((error) => {
        this.$message({
          message: "网络错误，请检查您的网络连接！",
          type: "error",
        });
      });
  },

  // 封装通用的数据请求方法
  paramsList() {
    const data = { ...this.searchKeyword }; 

    getListByParams(data).then((response) => {
          if (response.code === 200) {
            this.dataList = response.data; // 设置表格数据
            this.totalCount = response.data.length; // 设置总条数
          } else {
            this.$message({
              showClose: true,
              message: '数据加载失败，请稍后再试！',
              type: 'error',
            });
          }
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            message: '网络错误，请检查您的网络连接！',
            type: 'error',
          });
        });
  },


  // 处理搜索
  handleSearch() {
    this.currentPage = 1;
    this.paramsList();
  },

  // 重置方法
  resetSearch() {
    this.searchKeyword = {
      name: "",
      address: "",
      contact: "",
    };
    this.currentPage = 1; // 重置到第一页
    this.getData(); // 调用无条件查询方法
  },
    // 分页大小改变
    handleSizeChange(val) {
      this.PageSize = val;
      this.currentPage = 1;
    },
    // 当前页码改变
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    // 表格行样式
    tableRowClassName({ rowIndex }) {
      return rowIndex % 2 === 1 ? '' : 'success-row';
    },
  },
  created() {
    this.getData(); // 页面加载时获取数据
  },
};
</script>



<style scoped>
/* 搜索区域整体样式 */
.search-area {
  margin-bottom: 20px;
  padding: 20px;
  background-color: #f9f9f9; /* 浅色背景 */
  border-radius: 8px; /* 圆角 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 添加轻微阴影 */
}

/* 输入框样式 */
.search-area .el-input {
  width: 500px;
  margin-right: 10px; /* 输入框与按钮之间的间距 */
}

.search-area .el-input__inner {
  height: 40px; /* 增加输入框高度 */
  font-size: 14px; /* 字体大小 */
  border-radius: 4px; /* 圆角 */
  border: 1px solid #dcdfe6; /* 边框颜色 */
  transition: border-color 0.3s ease; /* 边框过渡效果 */
}

.search-area .el-input__inner:focus {
  border-color: #409eff; /* 聚焦时边框变蓝 */
  box-shadow: 0 0 4px rgba(64, 158, 255, 0.2); /* 添加聚焦阴影 */
}

/* 按钮样式 */
.search-area .el-button {
  height: 40px; /* 按钮高度与输入框一致 */
  margin-left: 10px; /* 按钮之间的间距 */
  padding: 0 20px; /* 增加按钮宽度 */
  font-size: 14px; /* 字体大小 */
  border-radius: 4px; /* 圆角 */
}

/* 新增按钮样式 */
.search-area .el-button:last-child {
  background-color: #409EFF; /* 蓝色背景 */
  border-color: #409EFF; /* 蓝色边框 */
}

.search-area .el-button:last-child:hover {
  background-color: #66B1FF; /* 鼠标悬浮时背景加深 */
  border-color: #66B1FF; /* 边框颜色加深 */
}

/* 重置按钮的基础样式 */
.search-area .el-button--info.is-plain {
  color: #909399; /* 文字颜色 */
  background-color: #f5f7fa; /* 背景颜色 */
  border-color: #dcdfe6; /* 边框颜色 */
}

/* 重置按钮悬停时的样式 */
.search-area .el-button--info.is-plain:hover {
  color: #606266; /* 悬停时文字颜色加深 */
  background-color: #ebeef5; /* 悬停时背景颜色 */
  border-color: #dcdfe6; /* 边框颜色保持不变 */
}

/* 重置按钮点击时的样式 */
.search-area .el-button--info.is-plain:active {
  color: #303133; /* 点击时文字颜色更深 */
  background-color: #e4e7ed; /* 点击时背景颜色 */
  border-color: #dcdfe6; /* 边框颜色保持不变 */
}



/* 查看职位按钮的默认样式 */
.el-button {
  transition: all 0.3s ease; /* 添加过渡效果 */
}

/* 查看职位按钮的悬浮样式 */
.el-button:hover {
  background-color: #67c23a; /* 鼠标悬浮时背景色变深 */
  color: #fff; /* 文字颜色变为白色 */
  border-color: #67c23a; /* 边框颜色与背景一致 */
  transform: scale(1.05); /* 放大按钮 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

/* 没有职位信息的按钮样式 */
.no-recruit {
  background-color: #f0f9eb; /* 浅绿色背景 */
  color: #a8b7c7; /* 浅灰色文字 */
  border-color: #e1f3d8; /* 浅绿色边框 */
}

/* 没有职位信息的按钮悬浮样式 */
.no-recruit:hover {
  background-color: #e1f3d8; /* 浅绿色背景加深 */
  color: #85ce61; /* 文字颜色变为浅绿色 */
  border-color: #c2e7b0; /* 边框颜色加深 */
  transform: none; /* 不放大 */
  box-shadow: none; /* 不添加阴影 */
}

/* 修改按钮的悬停和点击样式 */
.el-button--primary:hover,
.el-button--primary:focus {
  background-color: #409eff; /* 蓝色 */
  border-color: #409eff;
}

.el-button--danger:hover,
.el-button--danger:focus {
  background-color: #f56c6c; /* 红色 */
  border-color: #f56c6c;
}

</style>